<template>
    <DocumentEditor 
        id="docEditor" 
        documentServerUrl="http://192.168.56.58:12345"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
        class="only-office"
    /> 
</template>

<script setup>
    import { DocumentEditor } from "@onlyoffice/document-editor-vue";
    import { onBeforeMount, onMounted, ref } from "vue";
    import { LoginStore } from '@/store/login';
    import { storeToRefs } from "pinia";

    const wordUrl = 'http://192.168.104.30:8888/download';
    const wordUrl1 = "https://windtiktok.oss-cn-beijing.aliyuncs.com/%E6%99%BA%E8%83%BD%E6%96%87%E6%A1%A3%E6%96%87%E4%BB%B6%E4%B8%8B%E5%8F%91%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3.docx";
    const wordUrl2 = 'http://10.7.114.112:31984/ms-doc/api/v1/idoc-file/download-simple?id=1160598133797957633&appId=1009549605007003648';

    const callbackUrl = 'http://192.168.104.30:8888/call-only-office';

    const loginRef = storeToRefs(LoginStore());

    const userInfo = ref({});

    onBeforeMount(() => {
        console.log(loginRef.getInfo); 
        userInfo.value = loginRef.getInfo.value;
        console.log(userInfo.value);
        config.value.editorConfig.user = loginRef.getInfo.value;
    });
    
    // 高度
    const height = window.innerHeight - 18;

    const config = ref({
        // 文档有关的参数配置
        document: {
            key: '1ss23al',
            fileType: "docx",
            title: "测试文档",
            url: wordUrl,
            permissions: {
                chat: true,
                comment: true,
                // print: true,
                review: true
            },

        },
        documentType: "word",
        // 编辑器界面有关的配置
        editorConfig: {
            // callbackUrl: "test"
            lang: "zh-CN",
            callbackUrl: callbackUrl,
            // 定制内容
            customization: {
                // anonymous: {
                //     request: true,
                //     label: "风难止"
                // },
                /**
                 * 图片必须为此尺寸：172x40
                 */
                logo: {
                    image: ''
                },
                // 强制保存，即保存按钮是否开启
                forcesave: true,
                customer: { 
                    address: '西安', 
                },
                // 编辑栏是否紧凑
                compactToolbar: false
            }
        },
        height: height
    });

    // 文档加载钩子
    const coonDocumentReady = () => {
        console.log("正在加载only-office。。。");
    };

    // 文档修改钩子
    const documentStateChange = () => {
        console.log("文件被修改了");
    }

    // only-office 初始化钩子
    const onAppReady = () => {
        console.log("正在初始化only-office");
    }

</script>

<style scoped>
    .only-office {
        height: 100vh; 
    }
</style>